<form class="form-horizontal"
      role="form">

  <p>
    <strong>Please clarify:</strong><br/>
    This invoice needs clarification and could not be approved due to missing data.
  </p>

  <div class="form-group">
    <label class="control-label col-md-2">Invoice Document</label>
    <div class="form-control-static col-md-10">
      <a cam-file-download="invoiceDocument"></a>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Creditor</label>
    <div class="col-md-10">
      <input cam-variable-name="creditor"
             type="text"
             name="creditor"
             class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Amount</label>
    <div class="col-md-10">
      <input cam-variable-name="amount"
             type="text"
             name="amount"
             class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Invoice Category</label>
    <div class="col-md-10">
      <select cam-variable-name="invoiceCategory"
              class="form-control">
        <option>Travel Expenses</option>
        <option>Misc</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Invoice Number</label>
    <div class="col-md-10">
      <input cam-variable-name="invoiceNumber"
             type="text"
             name="invoiceNumber"
             class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-10 col-md-offset-2">
      <div class="checkbox">
        <label>
          <input cam-variable-name="clarified"
                 cam-variable-type="Boolean"
                 type="checkbox"
                 name="clarified"
                 class="form-control" />
          Could you clarify the invoice?
        </label>
      </div>
    </div>
  </div>
</form>

